<script setup lang="ts">
  import DynamicForm from '@/components/common/dynamicForm/DynamicForm.vue';
  import { DynamicFormOption, DynamicItem, DynamicSelectOption } from '@/components/types';
  import { useLocale } from '@/locales/useLocale';
  import {
    useDisCategoryAPi,
    useDisNamesAPi,
    useNationAPi,
  } from '@/hooks/api/useDataCollectionApi';
  import { computed, ref, watch } from 'vue';
  const { t } = useLocale();
  const { nation } = useNationAPi();
  const { disCategory } = useDisCategoryAPi();
  const { disNames } = useDisNamesAPi();
  import { defineRule } from 'vee-validate';
  import { useMobile } from '@/hooks/core/useMobile';
  import { IDataCollectionParam } from '@/api/types';
  import { reqDataCollection } from '@/api/module/datashowCollectionApi';
  import { ElMessage } from 'element-plus';
  //@ts-ignore
  defineRule('confirmedDisName', (value, [target]) => {
    const index = disNames.value[Number(target)].findIndex((v) => {
      return v.value === value;
    });
    if (index !== -1) {
      return true;
    }
    return t('message.verifyMessage.confirmedDis');
  });
  const schema = {
    age: 'required|integer',
    birthday: '',
    disCls: 'required',
    disName: 'required|confirmedDisName:@disCls',
    idCard: '',
    nation: '',
    pname: 'required',
    sex: '',
    sym: 'required',
    tel: '',
  };
  const initValues = {
    age: '',
    birthday: '',
    disCls: '',
    disName: '',
    idCard: '',
    nation: '',
    pname: '',
    sex: '男',
    sym: '',
    tel: '',
  };
  const patientInfoFormOption = [
    {
      is: DynamicItem.INPUT,
      name: 'pname',
      label: 'message.dataCollection.patientName',
      requiredField: true,
    },
    {
      is: DynamicItem.RADIO,
      name: 'sex',
      label: 'message.sys.userinfo.sex',
      options: [
        {
          value: '男',
          label: '男',
        },
        {
          value: '女',
          label: '女',
        },
      ],
    },
    {
      is: DynamicItem.INPUT,
      name: 'idCard',
      label: 'message.sys.userinfo.idCard',
    },
    {
      is: DynamicItem.INPUT,
      name: 'tel',
      label: 'message.sys.login.mobile',
    },
    {
      is: DynamicItem.INPUT,
      name: 'age',
      label: 'message.dataCollection.age',
      requiredField: true,
    },
    {
      is: DynamicItem.DATAPICKER,
      name: 'birthday',
      label: 'message.dataCollection.birthday',
    },
    {
      is: DynamicItem.SELECT,
      name: 'nation',
      label: 'message.dataCollection.nationality',
      options: nation,
    },
    {
      is: DynamicItem.SELECT,
      name: 'disCls',
      label: 'message.dataCollection.diseaseCategory',
      options: disCategory,
      requiredField: true,
    },
    {
      is: DynamicItem.SELECTSUB,
      name: 'disName',
      label: 'message.dataCollection.diseaseName',
      requiredField: true,
      options: disNames,
      parentId: 0,
    },
    {
      is: DynamicItem.INPUT,
      name: 'sym',
      label: 'message.dataCollection.specificSymptoms',
      type: 'textarea ',
      requiredField: true,
    },
  ] as DynamicFormOption[];
  const loading = ref(false);
  const onSubmit = (values: IDataCollectionParam, formTool: Recordable) => {
    loading.value = true;
    reqDataCollection(values).then((res) => {
      loading.value = false;
      ElMessage.success({ message: res.msg });
      formTool.resetForm();
    });
  };
  const isMobile = useMobile();
  const size = computed(() => {
    return isMobile.value ? 'default' : 'large';
  });
</script>

<template>
  <DynamicForm
    as="ElForm"
    :validation-schema="schema"
    :initialValues="initValues"
    label-width="120px"
    label-position="top"
    :options="patientInfoFormOption"
    @on-submit="onSubmit"
    :loading="loading"
    :size="size"
    animateClass="enter-oddEven"
    submit-content="message.sys.login.PatientInfoButton"
  />
</template>

<style lang="scss"></style>
